<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=0.5, maximum-scale=2.0"/>
  <title>CodePen - Animated Form Field Label</title>
  <link rel="stylesheet" href="./style.css">
  <script src="echarts.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<h2>最小二乘法(y=kx+b)</h2>

<p class="row">
  <input type="search" id="inputX" placeholder=" ">
  <label for="inputX">X测量值</label>
</p>
<p class="row">
  <input type="search" id="inputY" placeholder=" ">
  <label for="inputY">Y测量值</label>
  <button type="button" onclick="SubmitData()">
    <svg width="24px" height="24px" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Artboard">
                <g id="Group">
                    <circle id="Oval" stroke="#2E3131" stroke-width="15" cx="90" cy="90" r="82.5"></circle>
                    <polygon id="Triangle" fill="#2E3131" transform="translate(98.000000, 90.000000) rotate(90.000000) translate(-98.000000, -90.000000) " points="98 62 140 118 56 118"></polygon>
                </g>
            </g>
        </g>
    </svg>
  </button>
</p>
<p class="row">
    <input type="search" id="DN" placeholder=" ">
    <label for="DN">删除的序号</label>
</p>

<p></p>
<div><button1 type="button" onclick="location.reload()">刷新</button1>
    <button2 type="button" onclick="RemoveData()">删除</button2>
</div>
<!-- partial -->
<p></p>
<p id="demo2"></p>
<p id="demo3"></p>
<!-- 有Bug-->


<div id="main" style="width: 80%;height:400px;"></div>
<script type="text/javascript">
    var ArrayTest = new Array();
    var SubArrayTest = new Array();
    var InputNumber = 0;
    var k = 1, b = 0;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        xAxis: {},
        yAxis: {},
        series: [{
            symbolSize: 10,
            data: ArrayTest,
            type: 'scatter',
        }],
        grid: {
            show: true,
            borderColor: '#rgba(0, 0, 0, 1)',
            backgroundColor: "rgba(255, 255, 255, 1)",
            containLabel: true, 
            borderWidth: 1.5,
            width: "80%",
            height: "60%",
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    function RemoveData(){
        var RemoveNum = parseInt(document.getElementById("DN").value);
        if (RemoveNum){
            if (RemoveNum < 0 || RemoveNum > ArrayTest.length){
                document.getElementById("DN").value = "";
            }
            else {
                // alert("???" + RemoveNum + "???" + ArrayTest.length);
                RemoveNum--;
                ArrayTest.splice(RemoveNum, 1);
                if (ArrayTest.length >= 2){
                    LinearRegression();
                }
                var InputList = "";
                for (var i=0;i<ArrayTest.length;i++){
                    InputList += i+1 + "：("+ArrayTest[i]+")" + "<br/>";
                }
                document.getElementById("demo2").innerHTML = InputList;
                InputNumber--;
                document.getElementById("DN").value = "";
            }
        }
        else{
            document.getElementById("DN").value = "";
        }
        /*var RemoveNum = parseInt(prompt("请输入要删除的数据序号!"));
        if (RemoveNum){
            if (RemoveNum < 0 || RemoveNum > ArrayTest.length){
                alert("输入的数据超出范围！");
            }
            else {
                // alert("???" + RemoveNum + "???" + ArrayTest.length);
                RemoveNum--;
                ArrayTest.splice(RemoveNum, 1);
                if (ArrayTest.length >= 2){
                    LinearRegression();
                }
                var InputList = "";
                for (var i=0;i<ArrayTest.length;i++){
                    InputList += i+1 + "：("+ArrayTest[i]+")" + "<br/>";
                }
                document.getElementById("demo2").innerHTML = InputList;
                InputNumber--;
            }
        }
        else{
            alert("您没有输入！")
        }
        */


    }
    function ClearScreen() {
        ArrayTest.splice(0, ArrayTest.length);
        myChart.setOption(option);
        InputList = "";
    }
    function SubmitData() {
        var x, text;

        // 获取 id="numb" 的值
        SubArrayTest[0] = document.getElementById("inputX").value;
        SubArrayTest[1] = document.getElementById("inputY").value;
        // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
        // document.getElementById("demo1").innerHTML = ArrayTest + " length:" + ArrayTest.length;
        // 做深拷贝
        ArrayTest[InputNumber] = JSON.parse(JSON.stringify(SubArrayTest))
        // document.getElementById("demo1").innerHTML = ArrayTest + " length:" + ArrayTest.length;
        InputNumber++;
        var InputList = "";
        for (var i=0;i<ArrayTest.length;i++){
            InputList += i+1 + "：("+ArrayTest[i]+")" + "<br/>";
        }
        myChart.setOption(option);
        document.getElementById("demo2").innerHTML = InputList;
        document.getElementById("inputX").value = "";
        document.getElementById("inputY").value = "";
        if (ArrayTest.length >= 2){
            LinearRegression();
        }

    }

    function LinearRegression(){
        var xsum = 0, ysum = 0, xTimesySum = 0, xSquareSum = 0;
        var xmin = ArrayTest[0][0], xmax = ArrayTest[0][0]
        for (var i=0;i<ArrayTest.length;i++){
            if (ArrayTest[i] == undefined){
                continue;
            }
            var m = parseFloat(ArrayTest[i][0])
            var n = parseFloat(ArrayTest[i][1])
            xsum += m;
            ysum += n;
            xTimesySum += m * n;
            xSquareSum += m * m;
            if (xmin > m){
                xmin = m;
            }
            if (xmax < m){
                xmax = m;
            }
        }
        var xmean = xsum / ArrayTest.length; // 均值
        var ymean = ysum / ArrayTest.length; // 均值
        var num = 0, den = 0;
        num = xTimesySum - xsum * ysum / ArrayTest.length
        den = xSquareSum - xsum * xsum / ArrayTest.length
        k = num / den;
        b = ymean - k * xmean;
        // document.getElementById("demo4").innerHTML = 'b = ' + b;

        option = {
            xAxis: {},
            yAxis: {},
            series: [{
                symbolSize: 10,
                data: ArrayTest,
                type: 'scatter'
            },
            {
                data: [[xmin, k * xmin + b], [xmax, k * xmax + b]],
                type: 'line'
            }], 

            grid: {
                show: true,
                borderColor: '#rgba(0, 0, 0, 1)',
                backgroundColor: "rgba(255, 255, 255, 1)",
                containLabel: true, 
                borderWidth: 1.5,
                width: "80%",
                height: "60%",
            }
        };
    myChart.setOption(option);
    k = k.toFixed(4);
    b = b.toFixed(4);
    document.getElementById("demo3").innerHTML = 'k = ' + k + "<br/>" + 'b = ' + b;
    }

    </script>
</body>
</html>
